import defaultAvatarIcon from '@/assets/img/default_avatar.png';
import iconMap from '@/components/IconMap';
import { RootState } from '@/typting';
import { Avatar, Dropdown, Layout, MenuProps } from 'antd';
import jsCookie from 'js-cookie';
import { useSelector } from 'umi';
const { Header } = Layout;

interface Props {
  collapse: boolean;
  changeCollapse: () => void;
}
const CommonHeader = (props: Props) => {
  const { userInfo } = useSelector((state: RootState) => state.user);

  //- 用户退出按钮点击
  const signOut = () => {
    sessionStorage.clear();
    jsCookie.set('token', '');
    window.location.href = '/users/login';
  };

  const items: MenuProps['items'] = [
    {
      key: '1',
      label: <span onClick={signOut}>退出</span>,
    },
  ];

  return (
    <Header className="header-wrapper">
      <div className="button" onClick={props.changeCollapse}>
        {props.collapse ? iconMap.rightArrow : iconMap.leftArrow}
      </div>
      <div style={{ lineHeight: '35px' }}>
        <Dropdown menu={{ items }}>
          <div>
            <span>{userInfo.userName}</span>
            <Avatar style={{ marginLeft: 0 }} src={userInfo.avatar || defaultAvatarIcon} />
          </div>
        </Dropdown>
      </div>
    </Header>
  );
};

export default CommonHeader;
